<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<link rel="stylesheet" href="css/codemirror.css" />
		<link rel="stylesheet" href="css/theme/dracula.css" />
		<link rel="stylesheet" href="css/show-hint.css" />
		<script type="text/javascript" src="js/codemirror.js"></script>
		<script type="text/javascript" src="js/sublime.js"></script>
		<script type="text/javascript" src="js/sql.js"></script>
		<script type="text/javascript" src="js/sql-hint.js"></script>
		<script type="text/javascript" src="js/show-hint.js"></script>
		<script type="text/javascript" src="js/formatting.js"></script>
		<script type="text/javascript" src="js/sql-formatter.min.js"></script>
		<script type="text/javascript" src="js/active-line.js"></script>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				font-size: 16px;
				font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
			}
			
			header {
				width: 100%;
				height: 30px;
				background-color: #1d364a;
				line-height: 30px;
				color: #fff;
			}
			
			header>span {
				font-weight: 800;
				margin-left: 1.5rem;
			}
			
			.CodeMirror {
				font-size: 1rem;
				font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
			}
			
			.btn {
				display: inline-block;
				text-align: center;
				background-color: #23bede;
				padding: 10px 0;
				width: 110px;
				color: #FFF;
				font-size: 16px;
				border-radius: 3px;
				border: none 0;
				cursor: pointer;
				line-height: normal;
				outline: 0;
				white-space: nowrap;
				margin: .2rem;
			}
			
			#codeRun {
				text-align: center;
				background-color: #d8f0f5;
			}
			
			#handle {
				background: #3d444c;
				height: 20px;
				user-select: none;
				cursor: row-resize;
				text-align: center;
				line-height: 20px;
			}
			
			.arrow-v {
				background-color: #161b1e;
				display: inline-block;
				width: 3rem;
				height: inherit;
				line-height: inherit;
			}
			
			svg {
				vertical-align: middle;
			}
			
			#code {
				min-height: 300px;
			}
		</style>
	</head>

	<body>
		<div class="wrap"></div>
		<header>
			<span>
        运行sql
    </span>
		</header>
		<textarea id="code"></textarea>
		<!-- 负责拖拽 -->
		<!--<div id="handle">
			<div class="arrow-v">
				<svg t="1506317058000" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="989" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
					<defs>
						<style type="text/css"></style>
					</defs>
					<path d="M701.259294 726.618353l43.128471 42.044235-232.387765 238.230588-232.387765-238.170353 43.128471-42.044235 159.141647 163.056941 0-755.471059-159.141647 163.117176-43.128471-42.104471 232.387765-238.170353 232.387765 238.170353-43.128471 42.044235-159.141647-163.056941 0 755.531294 159.141647-163.177412z" p-id="990" fill="#fff"></path>
				</svg>
			</div>
		</div>-->
		<div id="codeRun">
			<button class="btn btnRun">执行</button>
			<button class="btn btnRun" id='format'>格式化</button>
		</div>
		</div>
	</body>
	<script type="text/javascript">
		//根据DOM元素的id构造出一个编辑器
		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			mode: "text/x-sql",
			lineNumbers: true,
			                            indentWithTabs: true,
                            smartIndent: true,
                            styleActiveLine: true,
                                                        matchBrackets: true,
                            autofocus: true,
			theme: "dracula",
			keyMap: "sublime",
			extraKeys: {
				"Ctrl": "autocomplete"
			},
			hint: CodeMirror.hint.sql,
			lineWrapping: true, //是否换行
			foldGutter: true, //是否折叠
			gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], //添加行号栏，折叠栏
			hintOptions: {
				tables: {"h5web":["ss","dd"]}
			}
		});

		editor.on('keyup', function(cm, event) {
			//			editor.showHint(); //满足自动触发自动联想功能
			if(!cm.state.completionActive &&
				((event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode == 190)) {
				CodeMirror.commands.autocomplete(cm, null, {
					completeSingle: false
				});
			}
		});

		//		editor.setSize('height', '200px');
		//		// 最小高度
		//		const MIN_HEIGHT = 200;
		//
		//		//对编辑器这个node添加鼠标事件
		//		var editorNode = document.getElementById('code');
		//
		//		var hahahha = document.getElementsByClassName('CodeMirror-wrap')[0];
		//		console.log('初始值：' + hahahha.offsetHeight);
		//		// 
		//		var dragBar = document.getElementById('handle');
		//
		//		// 返回编辑器的高度
		//		function getHeight(node) {
		//			let h = window.getComputedStyle(node, null).height.replace(/px$/, "");
		//			if(h === 'auto') {
		//				h = node.offsetHeight;
		//			}
		//			return parseInt(h);
		//		}
		//
		//		// 释放鼠标的时候触发的事件
		//		function release() {
		//
		//			console.log('end');
		//			// 删除和添加都是使用两个参数的
		//			document.body.removeEventListener('mousemove', drag);
		//			window.removeEventListener('mouseup', release);
		//		}
		//
		//		// drag 事件
		//		function drag(e) {
		//			console.log('drag');
		//			console.log('e.y:' + e.y);
		//			console.log('pos_y:' + pos_y);
		//			console.log('startHeight:' + startHeight);
		//			console.log('-----------')
		//			console.log(startHeight + e.y - pos_y);
		//			editor.setSize('height', Math.max(MIN_HEIGHT, (startHeight + e.y - pos_y)) + "px");
		//		}
		//
		//		dragBar.addEventListener('mousedown', function(e) {
		//			console.log('start');
		//			// 开始高度
		//			startHeight = getHeight(hahahha);
		//			console.log('开始高度：' + startHeight);
		//			pos_x = e.x;
		//			pos_y = e.y;
		//			//只有按下鼠标移动的时候才能移动
		//			document.body.addEventListener('mousemove', drag);
		//			window.addEventListener('mouseup', release);
		//		});

		function getSelectedRange() {
			return {
				from: editor.getCursor(true),
				to: editor.getCursor(false)
			};
		}

		//代码的格式化
		function autoFormatSelection() {
			// 获取输入的值
			console.log(editor.getValue());
			console.log('123');
			console.log('范围：' + JSON.stringify(getSelectedRange()));
			var range = getSelectedRange();
			editor.autoFormatRange(range.from, range.to);

			function format() {
				console.time('formatting');

				let str = sqlFormatter.format(editor.getValue(), {
					language: 'sql'
				});
				editor.setValue(str);
				console.log('格式化的代码:' + str);
				console.timeEnd('formatting');
			}
			format();
		}

		var formatButton = document.getElementById('format');
		formatButton.addEventListener('click', autoFormatSelection);
	</script>
	</body>

</html>